<template>
  <div class="account-security">
    <div class="head"><img src="~/assets/images/account-security1.png" alt="">账户安全</div>
    <div class="content" v-if="!chosen">
      <div class="item">
        <img src="~/assets/images/login-pwd.png" alt="">
        <div class="name">登录密码</div>
        <div class="button" @click="choose('pwd')">修改</div>
      </div>
      <div class="item">
        <img src="~/assets/images/mobile-number.png" alt="">
        <div class="name">手机号码</div>
        <div class="button" @click="choose('mobile')">修改</div>
      </div>
      <div class="item">
        <img src="~/assets/images/email.png" alt="">
        <div class="name">邮箱</div>
        <div class="button" @click="choose('email')">修改</div>
      </div>
      <div class="item">
        <img src="~/assets/images/wechat.png" alt="">
        <div class="name">微信号</div>
        <div class="button" @click="showScan = true">修改</div>
      </div>
    </div>
		<div class="content" v-else>
			<div class="backIcon f16 cor666 cursor" @click="back"> <i class="el-icon-d-arrow-left"></i>返回 </div>
			<change-pwd v-if="chosen === 'pwd'" />
			<change-mobile v-else-if="chosen === 'mobile'" />
			<change-email v-else-if="chosen === 'email'" />
		</div>
   <!-- 绑定微信授权 -->
    <div v-show="showScan" class="scan">
      <img class="close-icon" src="~/assets/images/close1.png" alt="" @click="showScan = false">
      <div class="qr" ref="qrCodeUrl" id="login_container">
        <!-- 承载二维码容器 -->
      </div>
      <div class="agreement">扫码即表示已阅读并接受
        <router-link to="" @click.native="showAgreement = true">《用户协议》</router-link>
      </div>
    </div>
    <!-- 规则 -->
    <div v-if="showAgreement" class="agreement-panel">
      <img class="close-icon" src="~/assets/images/close1.png" alt="" @click="showAgreement = false">
      <div class="title">{{ rules.title }}</div>
      <div class="text" v-html="rules.content" />
    </div>
  </div>
</template>

<script>
import ChangePwd from '@/views/profile/account-settings/children/ChangePwd'
import ChangeMobile from '@/views/profile/account-settings/children/ChangeMobile'
import ChangeEmail from '@/views/profile/account-settings/children/ChangeEmail'
import { platformRules } from '@/request/api'

export default {
  name: 'AccountSecurity',
  components: { ChangePwd, ChangeMobile, ChangeEmail },
  data() {
    return {
      chosen: "",
      showScan: false,
      rules:{},
      showAgreement: false
    }
  },
  mounted() {
    this.get_wx_qrcode()
    this.getRules()
    if(this.$route.query.code) {
      this.showScan = false
    }
  },
  methods: {
    getRules() {
      platformRules(2).then(res => {
        this.rules = res.data
      })
    },
		back(){
			this.chosen = ''
		},
    choose(item) {
      this.chosen = item
    },
    get_wx_qrcode() {
      // 回调域名需要经过encodeURIComponent处理
      const obj = new WxLogin({
        self_redirect: false,  //值为true时，直接在二维码的弹窗中进行页面跳转及其余操作,
        id: 'login_container',       //需要承载二维码的容器id
        appid: 'wx0b12bc5f78a50ddc',
        scope: 'snsapi_login',     //网页授权，目前网页只有这一种方式，静默授权
        redirect_uri: encodeURIComponent('http://www.pack-mate.com/#/profile/account-setting/account-security'),     //回调域名(地址前部分是项目域名，后部分loginSuccess是微信需要跳转的路径（vue中的路由名称）)
        state: Math.random(),
        style: 'black',
        href: ''
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/cover.scss";

.account-security {
  position: relative;
  .head {
    height: 60px;
    background-color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #666;

    img {
      margin-right: 6px;
      margin-top: 3px;
    }
  }
	.backIcon:hover{
		color: $theme-color-1;
	}
  .content {
    background-color: #fff;
    padding: 15px 20px;

    .item {
      display: flex;
      align-items: center;
      position: relative;
      padding: 25px 0;

      &:not(:last-of-type) {
        border-bottom: solid 1px #EDEDED;
      }

      img {
        margin-right: 15px;
      }

      .name {
        color: #666;
        font-size: 16px;
      }

      .button {
        width: 85px;
        height: 40px;
        border: solid 1px $theme-color-1;
        color: $theme-color-1;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 0;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
.scan {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 432px;
    height: 483px;
    background-color: #fff;
    border: solid 1px #eaeaea;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    .close-icon {
      position: absolute;
      top: 15px;
      right: 15px;
      // background: #000;
      cursor: pointer;
    }

    .title {
      font-weight: bold;
      font-size: 22px;
      color: #969696;
      margin-top: 80px;
      margin-bottom: 20px;
    }

    .qr {
      display: flex;
      color: #4a4a4a;
      justify-content: center;
      align-items: center;
      margin: 0 auto 25px;
    }
    /deep/ iframe {
      width: 300px !important;
      height: 380px !important;
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .prompt {
      margin-bottom: 40px;
      color: #969696;
    }

    .agreement {
      color: #969696;

      a {
        color: $theme-color-1;
      }
    }
  }
  .agreement-panel {
    position: absolute;
    top: calc(50% - 165px);
    left: calc(50% - 300px);
    z-index: 99;
    width: 600px;
    height: 530px;
    background-color: #fff;
    border: solid 1px #eaeaea;
    display: flex;
    flex-direction: column;
    align-items: center;

    .close-icon {
      position: absolute;
      top: 15px;
      right: 15px;
      cursor: pointer;
    }

    .title {
      margin-top: 30px;
      font-size: 18px;
      color: #969696;
    }

    .text {
      width: 100%;
      height: 350px;
      padding: 0 50px;
      font-size: 16px;
      overflow-y: auto;
      color: #969696;
      line-height: 35px;
    }
  }
</style>
